import React from "react";
import {changeTime} from './tool' 

//? React：
//? - 组件化开发，有利于团队合作
//? - 提供了数据绑定，来操作数据，减少DOM操作，提高开发效率
//? - React利用虚拟DOM，提高页面渲染性能

//todo 什么时候用状态？
//todo - 只要是页面变化的内容，一般都需要设置状态
//todo 2.什么时候不用设置新的状态？
//todo （1）变化的内容可以由现有的状态经过计算得来
//todo （2）变化的内容是从props得来的

//! render什么时候执行：父组件setstate或者传过来的数据变化了，render会执行

// 类组件特有state 生命周期
// 人       状态     影响         行为
// 组件     状态     响应（驱动）  视图
class Content extends React.Component {
    constructor() {
        super();
        //声明状态 变量
        this.state = {
            time: new Date().toLocaleString(),
            topics: []
        }

    }
    componentDidMount() {//只执行一次的生命周期
        // this指的就是实例
        // console.log(this)
        fetch("https://cnodejs.org/api/v1/topics")
            .then(res => res.json())//不加{} 回调函数直接return promise  这里是将数据解析为json
            .then(res => {
                console.log(res);

                //!react写法 so easy 
                this.setState({ topics: res.data })

                //! 原生DOM操作与上面的react操作对比，原生写法很麻烦
                //! 已经渲染完了，所以可以获取原生dom节点
                // let list=document.querySelector('#list');
                // for(var i=0;i<res.data.length;i++){
                //     let li=document.createElement('li');
                //     li.innerHTML='<img src='+res.data[i].author.avatar_url+'/>'+res.data[i].title;
                //     list.appendChild(li);
                // }
                // document.querySelector('h2').innerHTML=res.data.length;
            })

        setInterval(() => {
            this.setState({ time: new Date().toLocaleString() })
        }, 1000)
    }
    render() {
        const { time, topics } = this.state;
        return <div>
            <h1>{time}</h1>
            <h2>共有{topics.length}条帖子</h2>
            {/* <ul id="list">

            </ul> */}
            <ul>
                {
                    topics.map(topic => {
                        return <li key={topic.id}>
                            <img style={{width:80}} src={topic.author.avatar_url}/>
                            <span>{topic.reply_count}</span>
                            {topic.title}
                            <span>{changeTime(topic.last_reply_at)}</span>
                            {/* 差值表达式里面只要最终结果是一个值就可以 */}
                        </li>
                    })
                }
            </ul>
        </div>
    }
}



export default Content;
